<template>
  <view>
    <topBackGround :backisShow="0" :banner="2"></topBackGround>
    <view class="container">
      <view class="head_view">
        <view class="pic_head">
          <image v-if="isLogin===true" />
        </view>
        <text v-if="isLogin===true" class="head_phone">{{phone}}</text>
        <button 
           v-if="isLogin===false"
          plain="true" 
          style="border: none;" 
          class="login_btn"
          @click="login"
          >
          请点击登陆</button>
      </view>

      <view class="my_list">
        <!-- <view class="my_item" @click="toAccount">
          <image class="icon_pic" src="../../images/icon_account.png"/>
          <text class="my_item_text">账户管理</text>
        </view> -->
        <button class="my_item" :plain="true" @click="toDevice">
          <image class="icon_pic" src="../../images/icon_device.png"/>
          <text class="my_item_text">设备管理</text>
        </button>
        <button class="my_item" :plain="true" @click="toQuestion">
          <image class="icon_pic" src="../../images/icon_question.png"/>
          <text class="my_item_text">问题反馈</text>
        </button>
        <button class="my_item" :plain="true" @click="toAbout">
          <image class="icon_pic" src="../../images/icon_about.png"/>
          <text class="my_item_text">关于我们</text>
        </button>
        <!-- <button class="my_item" :plain="true" @click="addDevice">
          <image class="icon_pic" src="../../images/icon_device.png"/>
          <text class="my_item_text">模拟添加设备</text>
        </button> -->
      </view>
    </view>
  </view>
    
</template>
    
<script setup>
  import Taro from '@tarojs/taro';
  import topBackGround from '../../../src/components/backGround.vue';
  import { ref, onUnmounted } from 'vue';
  import requset from '../../network/request'

  import { getCurrentInstance } from 'vue';
  const instance = getCurrentInstance();
  instance.appContext.config.globalProperties.$loadFontFace()

  const userId = Taro.getStorageSync('userId');
  const userToken = Taro.getStorageSync('token');
  let num = 0
  function addDevice() {
    num++
    requset('/mini-program/device/bind', {
      method: 'post',
        data: {
          userId,
          userToken,
          deviceId: 'a00'+ num,
          nickName: '测试00'+ num,
          mac: 'a00'+ num,
          deviceToken: 'a00'+ num
        }
    }).then(res =>{
      // console.log(res)
      if ( res.code === 200 ) {
        Taro.showToast({
          title: '添加成功',
          duration: 2000
        })
      }
    })
  }

  let isLogin = ref(false);
  let phone = ref(0);
  
  if (userToken) {
    isLogin.value = true;
    phone.value = Taro.getStorageSync('phone');
    console.log('phone.value:', phone.value);
  }

  function login() {
    Taro.getUserInfo({
      success: (res) => {
        console.log(res);
      },
    });
  }

  let navigateDisabled = {}; // 用于控制不同按钮的禁用状态
  let timers = []; // 用于存储定时器

  function toDevice() {
    navigateTo('deviceButton', '/pages/my_device/index', 1000);
  }

  function toQuestion() {
    navigateTo('questionButton', '/pages/my_question/index', 1000);
  }

  function toAbout() {
    navigateTo('aboutButton', '/pages/my_about/index', 1000);
  }

  function navigateTo(key, url, disableTime = 1000) {
    if (navigateDisabled[key]) return;
    navigateDisabled[key] = true;

    Taro.navigateTo({
      url: url,
      success() {
        console.log(`成功跳转到 ${url}`);
        const timer = setTimeout(() => {
          navigateDisabled[key] = false;
          clearTimer(timer);
        }, disableTime);
        timers.push(timer); // 将定时器存储到数组中
      },
      fail() {
        console.log(`跳转到 ${url} 失败`);
        navigateDisabled[key] = false;
      },
    });
  }

  // 清除定时器
  function clearTimer(timer) {
    clearTimeout(timer);
    timers = timers.filter(t => t !== timer); // 从定时器数组中移除已清除的定时器
  }

  // 在组件卸载时清理所有定时器
  onUnmounted(() => {
    timers.forEach(timer => clearTimeout(timer));
    timers = []; // 清空定时器数组
  });
  </script>
  
  <style>

  .my_list{
    width: 90%;
    margin: 50px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
  }

  .my_item {
    width: 100%;
    height: 116px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background: url(../../images/icon_arrow_right.png) no-repeat center right;
    background-size: 24px;
    background-color: transparent;
    font-family: 'siyuan',sans-serif;
    font-size: 36px;
    border-bottom: 4px solid #ECE5DA;
    color: #181410;
  }

  .icon_pic {
    width: 48px;
    height: 48px;
    margin-right: 10px;
  }

  .my_icon_arrow {
    width: 28px;
    height: 28px;
    /* align-self: end; */
    justify-self:flex-end;
  }

  .head_view {
    width: 90%;
    margin: 48px auto 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .pic_head{
    width: 112px;
    height: 112px;
    background: url(../../images/default_head.png) no-repeat;
    background-size: 100%;
  }

  .head_phone {
    font-size: 50px;
    color: #181410;
    margin-left: 20px;
  }

  .login_btn{
    background-color: none;
    border: 5px solid red;
    font-size: 40px;
    margin-left: 10px;
    padding: 0;
  }

  .my_item[plain] {
    padding-left: 0;
    border: none;
    border-bottom: 4px solid #ECE5DA;
    border-radius: 0;
  }
  .my_item[disabled] {
    background-color: transparent;
    font-family: 'siyuan',sans-serif;
    font-size: 36px;
    border-bottom: 4px solid #ECE5DA;
    color: #181410;
  }
  
  
  </style>